<template>
    <div class="login">
       <div class="ke">
        <span class="ketext">联系客服</span>
       </div>
        <!-- logo内容 -->
        <h2 class="logo">
            <img src="login-icon.png" alt="">
            <span class="sn">欢迎登录苏宁易购</span>
        </h2>
        <!-- 切换 -->
        <!-- 手机注册 -->
        <div class="handof" v-if="bool">
            <!--输入框 -->
            <div class="inputs">
                <input type="text" @blur="Testphone()" v-model.trim="phone" placeholder="请输入手机号">
            </div>
            <div class="pass">
                <input id="nsns"  type="text" @blur="PanDuan()" v-model="yan"   placeholder="请输入验证码">
                <input @click="GetYanZhne()" class="btn" :disabled=stop type="button" v-model="getyan">
            </div>
            <div class="place">
                <span class="ts">未注册的手机号验证后自动注册</span>
            </div>
            <!-- 按钮 -->
            <div class="btnlogin">
                <button @click="testpass()"  class="logtn">注册</button>
            </div>
            <div class="phone" @click="change()">
                <span class="phonetext">账号密码登录</span>
            </div>
        </div>

        <!-- 手机登录 -->
        <div class="handof" v-else>
            <!-- 输入框 -->
            <div class="inputs">
                <input type="text" v-model.trim="phone" placeholder="请输入手机号/用户名/邮箱">
            </div>
            <div class="passt">
                <input type="text" class="nsns" v-model.number="pass" placeholder="请输入密码">
                <input  class="btns"  type="button" v-model="ts">
            </div>
            <div class="tst"></div>
            <!-- 按钮 -->
            <div class="btnlogin">
                <button @click="Logins()" class="logtn">登录</button>
            </div>
            <div class="phone" @click="change()">
                <span class="phonetext">验证码登录</span>
            </div>
        </div>
  
        <!-- 其他方式 -->
        <div class="fang">
            <div class="way">
                <p>
                    <span class="lang"></span>
                    <span class="line"> 其他登录方式 </span>
                    <span class="lang"></span>
                </p>
            </div>
            <div class="qq">
                <div class="imgbox">
                    <img src="qq.png" alt="">
                    <img src="epp.png" alt="">
                </div>
            </div>
            <div class="argue">
                <div>我同意<a
                        href="https://csfs.suning.com/privacy.html#/detail?channelId=163488611809858538&navName=%E8%8B%8F%E5%AE%81%E4%BC%9A%E5%91%98%E7%AB%A0%E7%A8%8B">《苏宁易购会员章程》</a><a
                        href="https://sale.suning.com/all/regProtocol/yfbxy.html">《易付宝协议》</a></div>
            </div>
        </div>
    </div>
</template>

<script>
import { TestZC, getSms, Sms, Zhuce, Login } from '@/api/index.js'
import { Toast } from 'vant';
import Vue from 'vue';
Vue.use(Toast);
export default {
    data() {
        return {
            bool:true,
            phone: '',//手机号
            pass: '',
            getyan: '获取验证码',
            stop: false,//禁止
            setyan: null,//用来存放验证码
            start: '',//验证码成功
            ts: "忘记密码",
            yan:''//提交验证码并判断
        }
    },
    methods: {
        change() {
            this.bool = !this.bool
        },
        //判断手机号是否背注册过
        Testphone() {
            let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
            // console.log(reg.test(this.phone))
            if (this.phone !== ''&& reg.test(this.phone)) {
                TestZC(this.phone).then((ok) => {
                    // console.log(ok)
                    if (ok.data.code == 10005) {
                        Toast((ok.data.message) + ",请您换个手机号试试！")
                    } else {
                        Toast(ok.data.message)
                        console.log(ok)
                    }
                    
                })
            } else {
                Toast('您好！请先输入正确手机号注册');
            }
            
        },
        //获取验证码
        GetYanZhne() {
            // console.log(111)
            getSms(this.phone).then((ok) => {
                // console.log(ok.data.data);
                Toast(ok.data.data)
                this.setyan = ok.data.data
                console.log(this.setyan);
            })
            this.stop = true;
            let count = 5;
            let time = setInterval(() => {
                this.getyan = "已发送" + count + "秒";
                count--
                if (count < 0) {
                    this.stop = false;
                    clearInterval(time);
                    this.getyan ="获取验证码"
                }
            },1000)

        },
        // 判断验证码是否正确
        PanDuan() {
            this.yan = this.setyan;
            console.log(1);
            if (this.phone !== '', this.yan !== '') {
                Sms(this.phone, this.yan).then((ok) => {
                    this.start = ok.data.code
                    console.log(this.start)
                    Toast(ok.data.message)
                })
            } else {
                Toast('您好！请先输入手机号');
            }
        },
        // 注册
        testpass() {
            if (this.start == 200) {
                Zhuce(this.phone, this.yan).then((ok) => {
                    console.log(ok)
                    Toast("恭喜您" + (ok.data.message) + "请登录吧，亲！")
                    this.bool = false;
                })
            }else{
                Toast('您好！请先输入正确的验证码');
            }
        },
        //登录
        Logins() {
            if (this.phone !== '' && this.pass!=='') {
                Login(this.phone,this.pass).then((ok) => {
                    console.log(ok)
                    console.log(ok.data);
                    Toast(ok.data.message);
                    if (ok.data.code == '200') {
                        sessionStorage.setItem("token", ok.data.data.token);
                        sessionStorage.setItem("userid", ok.data.data.userid);
                        this.$router.push('/home/hompage')
                    } else {
                        Toast('密码错误')
                    }
                })
            } else {
                Toast('您好！请先输入手机号和密码');
            }
        },
        // changepss    改密码
        changepss() {
            
        },

    }
}
</script>

<style lang="scss" scoped>
.login{
    width: 100%;
    height: 6.67rem;
    background-color: #ffffff;
    .ke{
        height: 0.65rem;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        .ketext{
            font-size: .12rem;
            margin-left: 3.15rem;
            margin-top: 0.15rem;
        }
    }
    .logo{
        height:0.45rem ;
        display: flex;
        img{
            margin-left: 0.37rem;
            width: 0.45rem;
            height: 0.45rem;
        }
        .sn{
            padding-left :0.15rem; 
            font-size: 0.18rem;
            line-height:0.45rem ;
            font-weight: 0.5rem;
        }
    }
    .inputs{
        width: 100%;
        height: 0.76rem;
        display: flex;
            input{
                outline: none;
                border: none;
                width: 3.03rem;
                margin: 0rem 0.37rem;
                height: 0.335rem;
                border-bottom: 1px solid #d5d5d5;
                margin-top: 0.42rem;
                color: #ccc;
                font-size: 0.15rem;
            }
    }
    .tst{
        display: flex;
        width: 100%;
        height: 0.2rem;
    }
    .passt{
        width: 100%;
        height: 0.76rem;
        display: flex;
            .nsns{
                background-color: white;
            }
            input {
                outline: none;
                border: none;
                width: 1.94rem;
                margin: 0rem 0.37rem;
                height: 0.335rem;
                border-bottom: 1px solid #d5d5d5;
                margin-top: 0.42rem;
                color: #ccc;
                font-size: 0.15rem;
                margin-right: 0rem;
            }
            .btns {
                width: 1.02rem;
                height: 0.41rem;
                background-color: #ffffff;
                margin-left: 0rem;
                margin-top: 0.35rem;
                border-radius: 1px solid #6c6969;
                color: #101010;
            }
    }
    .pass{
        display: flex;
        width: 100%;
        height: 0.54rem;
        font-size: 0.15rem;
        #nsns{
            background-color: #ffffff;
        }
        input{
            outline: none;
            border: none;
            width: 1.94rem;
            border-bottom: 1px solid #d5d5d5;
            margin-left: 0.37rem;
        }
        .btn{
            width: 1.02rem;
            height: 0.41rem;
            background-color: #ffffff;
            color: #ccc;
            border: 1px solid #e1e1e1;
            border-radius: 0.09rem;
            margin-top: 0.13rem;
            margin-left: 0.09rem;
        }
    }
    .place {
        width: 3.75rem;
        height: 0.54rem;
        display: flex;
        box-sizing: border-box;
        .ts {
            font-size: 0.12rem;
            margin-left:0.37rem ;
            margin-top: 0.09rem;
            color: #999999;
        }
    }
    .btnlogin{
        width: 100%;
        height: 0.49rem;
        display: flex;
        .logtn{
            background-color: #ffcc00;
            width: 3.03rem;
            height: 0.49rem;
            margin: 0 auto;
            border: none;
            border-radius: 0.11rem;
            font-size: 0.17rem;
            font-weight: bolder;
        }
    }
    .phone{
        width: 100%;
        height: 1.76rem;
        font-size: 0.15rem;
        box-sizing: border-box;
        .phonetext{
            width: 100%;
            display: block;
            margin-top: 0.22rem;
            text-align: center;
        }
    }
    .fang{
        // position: fixed;
        margin-bottom: 0.24rem; 
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        .way {
            display: flex;
            width: 100%;
            height: 0.14rem;
            font-size: 0.12rem;
            color: #999999;
            text-align: center;

            p {
                position: relative;
                .lang{
                    width: 0.76rem;
                    position: absolute;
                    border-bottom: 1px solid #999999;
                    display: inline-block;
                    &:nth-child(1){
                        margin-left: 0.73rem;
                        margin-top: 0.05rem;
                    }
                    &:nth-child(3) {
                        margin-top: 0.05rem;
                        margin-left: 0.09rem;
                    }
                }
                .line {
                    margin-left: 1.55rem;
                }
            }

        }

        .qq {
            width: 100%;
            height: 0.33rem;
            display: flex;

            .imgbox {
                margin-top: 0.13rem;
                display: flex;

                img {
                    width: 0.33rem;
                    height: 0.33rem;

                    &:nth-child(1) {
                        margin-left: 1.15rem;
                    }

                    &:nth-child(2) {
                        margin-left: 0.89rem;
                    }
                }
            }
    }

    .argue {
        display: flex;
        margin: 0 0.65rem;
        color: #999999;
        font-size: 0.12rem;
        margin-top: 0.21rem;
        background-color: #ffffff;
        a {
            color: #101010;
        }
    }
    }
}
</style>